<template>
    <div>
        <SuperTable ref="table" path="/user/blacklist/index" :params="params" :columns="columns">
            <Button slot="header-left" type="primary" @click="showModal = true">新增限制</Button>
            <div slot="header-right">
                <Form ref="filter" :model="params" inline>
                    <FormItem label="关键词">
                        <Input v-model="params.number" clearable placeholder="身份证、手机号" />
                    </FormItem>
                    <Button type="primary" @click="handlFilter">筛选</Button>
                </Form>
            </div>
        </SuperTable>
        <Modal :title="'新增限制'" v-model="showModal" :width="420" @on-cancel="handleCancel">
            <Form ref="form" :model="form" :rules="rules" :label-width="100">
                <FormItem label="限制类型" prop="type" key="type" required>
                    <RadioGroup v-model="form.type" >
                        <Radio :label="1">身份证</Radio>
                        <Radio :label="2">手机号</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="限制号码" prop="number" key="number" required>
                    <Input v-model="form.number" placeholder="请输入限制号码" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="handleCancel">取消</Button>
                <Button type="primary" :loading="submiting" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
export default {
    components: {
        SuperTable
    },
    data() {
        return {
            showModal: false,
            submiting: false,
            params: {
                number: '',
                page: 1,
                pageSize: 10
            },
            columns: [
                {
                    title: '限制类型',
                    key: 'type_text',
                },
                {
                    title: '限制号码',
                    key: 'number',
                },
                {
                    title: '创建时间',
                    key: 'created_at',
                },
                {
                    title: "操作",
                    key: "action",
                    width: 120,
                    render: (h, params) => {
                        return h("div", [
                            h("Button", {
                                props: {
                                    type: "error",
                                    size: "small",
                                },
                                style: {
                                    marginLeft: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.handleDelete(params.row);
                                    }
                                }
                            }, "删除")
                        ])
                    }
                }
            ],
            form: {
                type: 1,
                number: '',
            },
            rules: {
                number: [
                    {required: true, message: '请输入限制号码', trigger: 'blur'}
                ]
            }
        };
    },
    methods: {
        handlFilter() {
            this.$refs.table.init();
        },
        handleDelete(row) {
            this.$Modal.confirm({
                title: "操作提示:",
                width: 320,
                content: `<p>您确定要删除吗?</p>`,
                onOk: () => {
                    const msg = this.$Message.loading({
                        content: '正在提交删除',
                        duration: 0
                    });
                    this.$ajax.delete('/user/blacklist/delete', {params: {id:row.id}}).then(() => {
                        msg();
                        this.$Message.success('删除成功');
                        this.$refs.table.reload();
                    }).catch(err => {
                        msg();
                        this.$Message.error(err.message || '删除失败');
                    })
                }
            });
        },
        handleSubmit() {
            if(this.submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    this.submiting = true;
                    this.$ajax.post('/user/blacklist/save', this.form).then(res => {
                        this.$Message.success('添加成功');
                        this.handleCancel();
                        this.$refs.table.init();
                        this.submiting = false;
                    }).catch(err => {
                        this.submiting = false;
                        this.$Message.error(err.message || '提交失败');
                    })
                }
            })
        },
        handleCancel() {
            this.showModal = false;
            setTimeout(() => {
                this.form.type = 1;
                this.form.number = '';
            }, 300)
        }
    }
};
</script>